<template>
	<view class="container">
		<top-back-navbar position="fixed" :title="navTitle" background="#ffffff" color="#000000"></top-back-navbar>
		<scroll-view class="scroll-box" scroll-y>
			<view class="content">
				<view class="goods_list" v-if="res.length">
					<view class="goods_item-group" v-for="(item,index) in res" :key="index">
						<view class="goods_item" @click="opendetail" :data-newsid="item.id">
							<image :src="item.thumb" mode="aspectFill" class="goods-image"></image>
							<view class="goods-info-list" style="margin-top:12rpx;">
								<view class="goods-info-item red-color">
									<text class="goods-info-item-text">积分值:</text>
									<text class="goods-info-item-num">{{item.jfz || '0.00'}}</text>
								</view>
								<view class="goods-info-item red-color">
									<text class="goods-info-item-text">PV&nbsp;值:</text>
									<text class="goods-info-item-num">{{item.pv || '0.00'}}</text>
								</view>
							</view>
							<view class="goods-info-list">
								<view class="goods-info-item red-color">
									<text class="goods-info-item-text">贝&nbsp;&nbsp;值:</text>
									<text class="goods-info-item-num">{{item.bz || '0.00'}}</text>
								</view>
								<view class="goods-info-item red-color">
									<text class="goods-info-item-text">股&nbsp;&nbsp;值:</text>
									<text class="goods-info-item-num">{{item.tzz || '0.00'}}</text>
								</view>
							</view>
							<view class="goods-info-list">
								<view class="goods-info-item">
									<text class="goods-info-item-text">矿石数:</text>
									<text class="goods-info-item-num">{{item.mineral || '0.00'}}</text>
								</view>
								<view class="goods-info-item">
									<text class="goods-info-item-text">矿铢数:</text>
									<text class="goods-info-item-num">{{item.baht || '0.00'}}</text>
								</view>
							</view>
							<view class="text-overflow goods_title">{{item.title}}</view>
							<view class="goods_price">
								<view class="goods_price-text">
									<text class="price-text-icon">￥</text>
									<text class="price-text-num">{{item.marketprice}}</text>
								</view>
								<view class="goods_price-button">立即购买</view>
							</view>
						</view>
					</view>
				</view>
				<view class="u-f-ajc u-f-column" v-if="res.length==0" style="margin: 200rpx 0;">
					<u-empty mode="list" text="暂无数据" color="#ffffff" icon-color="#ffffff"></u-empty>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				cIndex: 0,
				rIndex: 999, // 删选栏选中状态
				menus: ['综合', '销量', '价格', '筛选'],
				category: "",
				keywords: "",
				res: [],
				recommend: {},
				page: 1,
				liststyle: false,
				index: 2,
				loadingType: 0,
				navTitle:'',
				load: 0,
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多了"
				},
				order: 0,
				by: 0,
				show: false,
				transShow: false,
				modeClass: ['fade'],
				maskClass: {
					'position': 'fixed',
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					'background-color': 'rgba(0, 0, 0, 0.4)'
				},
				transfromClass: {
					'position': 'fixed',
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					/* #ifndef APP-NVUE */
					'display': 'flex',
					/* #endif */
					'justify-content': 'center',
					'align-items': 'center'
				},
				isrecommand: 0,
				isnew: 0,
				ishot: 0,
				isdiscount: 0,
				issendfree: 0,
				istime: 0,
				cate: 0,
			};
		},
		onLoad: function(e) {
			uni.showLoading()
			this.category = e.cate || '';
			this.keywords = e.keywords || '';
			this.pageType = e.type || '1';
			if (this.pageType == 1) {
				this.navTitle='国风商城';
				this.initAjaxMethod()
			} else if (this.pageType == 2) {
				this.navTitle='商家入驻';
				this.searchData()
			}
			
		},
		onReachBottom() {
			if(this.pageType != 1);return;
			if (this.loadingType !== 0);return;
			this.loadingType = 1;
			uni.request({
				url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=goods.get_list&keywords=&isrecommand=&ishot=&isnew=&isdiscount=&issendfree=&istime=&cate=' +
					this.category + '&order=&by=&merchid=&page=' + this.index,
				method: 'GET',
				success: res => {
					if (res.data.result.list.length == 0) {
						this.loadingType = 2;
						return;
					}
					this.res = this.res.concat(res.data.result.list)
					this.loadingType = 0;
					this.index = this.index + 1;
				},
				fail: () => {},
				complete: () => {}
			});
		
		},
		methods: {
			async searchData() {
			  this.status = 'loading'
			  let {
			    data
			  } = await this.$myRequest({
			    url: `/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.workroom_goods_list&app=1`,
			    data: {
			      openid: uni.getStorageSync('openid'),
			      page: this.page,
			    }
			  })
			  uni.hideLoading();
			  this.listData=Array.isArray(data.list)?data.list:[];
			},
			initAjaxMethod(){
				var cate = '',
					keywords = ''
				if (this.category) {
					cate = '&cate=' + this.category
				} else if (this.keywords) {
					keywords = '&keywords=' + this.keywords
				}
				uni.request({
					url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=goods.get_list&keywords=&isrecommand=&ishot=&isnew=&isdiscount=&issendfree=&istime=&order=&by=&merchid=&page=1' +
						cate + keywords,
					success: res => {
						this.res = res.data.result.list;
						this.recommend = res.data.result.allcategory.parent
						if (res.data.result.total > res.data.result.pagesize) {
							this.load = 1
						}
						uni.hideLoading();
					},
					fail: () => {},
					complete: () => {}
				});
			},
			surechg() {
				this.onTap()
				uni.request({
					url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=goods.get_list&keywords=&isrecommand=' +
						this.isrecommand + '&ishot=' + this.ishot + '&isnew=' + this.isnew + '&isdiscount=' + this
						.isdiscount +
						'&issendfree=' + this.issendfree + '&istime=' + this.istime +
						'&order=&by=&merchid=&page=1' + '&cate=' +
						this.cate + '&keywords=' + this.keywords,
					success: res => {
						this.res = res.data.result.list;
						this.recommend = res.data.result.allcategory.parent
						if (res.data.result.total > res.data.result.pagesize) {
							this.load = 1
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 筛选选中类目
			recommendchg(index, id) {
				this.rIndex = index
				this.cate = id
			},
			chgnum(num) {
				if (num == 'isrecommand') {
					this.isrecommand = this.isrecommand == 1 ? 0 : 1
				} else if (num == 'isnew') {
					this.isnew = this.isnew == 1 ? 0 : 1
				} else if (num == 'ishot') {
					this.ishot = this.ishot == 1 ? 0 : 1
				} else if (num == 'isdiscount') {
					this.isdiscount = this.isdiscount == 1 ? 0 : 1
				} else if (num == 'issendfree') {
					this.issendfree = this.issendfree == 1 ? 0 : 1
				} else if (num == 'istime') {
					this.istime = this.istime == 1 ? 0 : 1
				}
			},
			menusclick(index) {
				this.onTap()
				if (index <= 2) {
					if (index == 0) {
						this.order = 'sales'
						this.by = 'desc'
					}
					if (index == 1) {
						this.order = 'sales'
						this.by = 'desc'
					}
					if (index == 2) {
						this.order = 'minprice'
						this.by = 'asc'
					}
					var data = {
						cate: this.category,
						keywords: this.keywords,
						order: this.order,
						by: this.by
					}
					// 控制多余的显示 cIndex
					this.cIndex = index
					uni.request({
						url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=goods.get_list&keywords=&isrecommand=&ishot=&isnew=&isdiscount=&issendfree=&istime=&order=&by=&merchid=&page=1',
						method: 'GET',
						data: data,
						success: res => {
							this.res = res.data.result.list;
							if (res.data.result.total > res.data.result.pagesize) {
								this.load = 1
							}
						},
						fail: () => {},
						complete: () => {}
					});
				} else {
					// 删选功能
					this.cIndex = index
					this.open(['slide-right', 'fade'])

				}

			},
			opendetail(e) {
				uni.navigateTo({
					url: '/pages/goods/detail?goodsid=' + e.currentTarget.dataset.newsid+'&type=gf'
				});
			},
			changeliststyle() {
				if (this.liststyle == true) {
					this.liststyle = false
				} else {
					this.liststyle = true
				}
			},
			searchGoods(e) {
				uni.showLoading()
				uni.request({
					url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=goods.get_list&keywords=&isrecommand=&ishot=&isnew=&isdiscount=&issendfree=&istime=&order=&by=&merchid=&page=1&keywords=' +
						e.mp.detail.value,
					method: 'GET',
					data: {},
					success: res => {
						this.res = res.data.result.list;
						if (res.data.result.total > res.data.result.pagesize) {
							this.load = 1
						}
						uni.hideLoading();
					},
					fail: () => {},
					complete: () => {}
				});

			},
			open(mode) {
				this.modeClass = mode
				this.transShow = !this.transShow
				this.show = true
			},
			onTap() {
				this.transShow = this.show = false
			},
			change(e) {
				console.log(e.detail);
			}
		}
	}
</script>

<style lang="scss">
	.scroll-box{
		box-sizing: border-box;
		height: calc(100%-110rpx);
	}
	page {
	  height: 100%;
	  background: url('/static/images/home/gf_bg.png') center -70rpx no-repeat;
	  background-size: 100% 106%;
	}

	.container {
		width: 100%;
		height: 100%;
		background-size: cover;
		box-sizing: border-box;
		;
	}

	.navbar {
		width: 100%;
		padding: 150rpx 0 56rpx;

		image {
			width: 80%;
			height: 130rpx;
		}
	}

	.content {
		padding: 0 15rpx;

		.goods_list {
			display: flex;
			flex-wrap: wrap;
			align-content: flex-start;

			.goods_item-group {
				width: 50%;
				padding: 15rpx;
			}

			.goods_item {
				background: url('/static/images/home/gf_list.png') center no-repeat;
				background-size: 100% 100%;
				box-sizing: border-box;
				padding: 26rpx;

				.goods-image {
					width: 100%;
					height: 260rpx;
					width: 100%;
					display: block;
				}

				.goods_title {
					padding: 0 4rpx;
					border-top: 1px solid #ffd29c;
					color:#362922;
					font-weight: bold;
				}
				.goods_price {
					padding-bottom: 10rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #C82400;
				
					.goods_price-text {
						display: flex;
						align-items: center;
						color: #d93d16;
				
						.price-text-icon {
							font-size: 24rpx;
							font-family: PageFonts!important;
						}
				
						.price-text-num {
							font-size: 38rpx;
							font-weight: bold;
							font-family: NumFonts!important;
						}
					}
				
					.goods_price-button {
						width: 140rpx;
						height: 50rpx;
						border-radius: 60rpx;
						background: #ca2e25;
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 28rpx;
					}
				}

				.goods-info-list {
					display: flex;
					align-items: center;
					.goods-info-item {
						font-size: 24rpx;
						width: 50%;
						display: flex;
						align-items: center;
						font-family: PageFonts!important;
						height: 32rpx;
					}
					.red-color{
						color:#d52d22;
					}
					.goods-info-item-text{
						width:60%;
						height: 30rpx;
						line-height: 30rpx;
					}
					.goods-info-item-num {
						width:40%;
					}
					.font-justify{
						text-align: justify;
						text-justify:distribute-all-lines; // 这行必加，兼容ie浏览器
						text-align-last: justify;
					}
				}
			}
		}
	}
</style>
